<template>
  <div>
    <!-- 第一步 获取数据 -->
    <h1 style="text-align: center">角色编辑</h1>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="角色名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <!-- 用可选择树形控件 -->
      <el-form-item label="角色权限">
        <el-tree
          :data="authList"
          :props="props"
          show-checkbox
          node-key="_id"
          ref="auth"
          :default-checked-keys="auths"
        >
        </el-tree>
      </el-form-item>
      <el-form-item label="角色权限">
        <!-- 发送请求新增角色 -->
        <el-button type="primary" @click="onSubmit"> 编辑 </el-button>
        <el-button @click="$router.back()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//导入获取所有权限函数 角色编辑函数 角色编辑
import { AuthList, RoleEdit, RoleOne } from "@/request";
export default {
  data() {
    return {
      props: {
        label: "name",
        children: "children",
      },
      form: {
        // 编辑的时候应该显示当前name  需要发请求  在created 获取到传递过来的id
        name: "",
      },
      // 接收数据
      authList: [],
      auths: [],
      id: "",
    };
  },
  methods: {
    //定义方法
    async getAuthList() {
      // 调用 AuthList()
      let data = await AuthList();
      //  数据获取成功 赋值给 authList  有数据可以渲染了
      this.authList = data.data.authlist;
    },
    // 按钮点击事件
    async onSubmit() {
      // 获取数据  - 发请求
      console.log(this.form);
      // console.log(111,this.$refs.auth.getCheckedNodes());
      // 整理一下 获取到的所有权限
      let auths = this.$refs.auth.getCheckedNodes();
      //将所有id 整理到一起
      auths = auths.map((auth) => auth._id);
      //遍历所有选中的权限
      //找子权限之前先判断 v是不是父权限  从所有权限中找有没有v
      //先将所有父权限的id 组成一个数组
      //遍历所有权限要每个权限的_id 放在 parentIdArr 中
      let parentIdArr = this.authList.map((item) => item._id);
      //判断v._id在不在 parentIdArr 中就知道它是不是父权限
      auths.forEach((v) => {
        //判断当前v是否是父权限 找到是父权限  找不到是子权限
        let index = parentIdArr.indexOf(v._id);
        if (index < 0) {
          //从所有权限当中找到当前这个子权限所在的父权限 - 遍历所有权限
          let parentId = "";
          this.authList.forEach((auth) => {
            //遍历所有子权限 判断有没有获取到  获取到了我们要的就是auth的 _id
            if (auth.children.find((son) => son._id === v)) {
              parentId = auth._id;
              //子跟父的id放一起
              auths.push(parentId);
            }
          });
        }
      });
      //去重 然后可以发请求了
      auths = [...new Set(auths)];
      // console.log(auths);
      //第一步   将所有的auth中的父id和子id整理到一个数组中 有重复再把重复的去掉
      // 调用函数发请求 - 获取到await 等一下
      //点击编辑
      let data = await RoleEdit({
        //传id
        id: this.id,
        name: this.form.name,
        //  这是数组数据  需要字符串数据
        auths: auths.join(","),
      });
      //   console.log(data);
      //判断添加成功或失败 提示
      let { error_code, msg } = data;
      // 成功
      if (error_code === 200) {
        this.$message({
          type: "success",
          duration: 1500,
          message: msg,
          onClose: () => {
            this.$router.push("/role/list");
          },
        });
        // 新增失败
      } else {
        this.$message({
          type: "error",
          duration: 1500,
          message: msg,
        });
      }
    },
    //请求函数 获取一个角色  需要传id    this.id = id
    async getOneRole() {
      // 等到数据
      let data = await RoleOne(this.id);
      let role = data.data.role;
      //    console.log(role);
      this.form.name = role.name;
      this.auths = role.auths;
      //1.从所有已经选中的权限中 this.auths 中查找所有的父权限
      //先获取所有父权限
      let allParentIds = this.authList.map((item) => item._id);
      //看是不是包含
      let checkedParentIds = this.auths.filter((item) =>
        allParentIds.includes(item)
      );
      //已经选中的所有父权限
      // console.log(checkedParentIds);

      //2.判断每个父权限中是否所有子权限都是选中状态
      //2.1 找到每个父权限所拥有的所有子权限 - 先遍历所有父权限
      checkedParentIds.forEach((checkedParentId) => {
        //先找id 看是不是相等
        let parentObj = this.authList.find(
          (item) => item._id === checkedParentId
        );
        //要所有的子权限
        let sonIds = parentObj.children.map((item) => item._id);
        //判断所有子权限是不是都是选中 在this.auths中 得到布尔值
        let bool = sonIds.every((item) => this.auths.includes(item));
        //4.不是全选中 - 从这个数组中将父权限删除
        //为假  就不是都选中 父权限应该被删除
        if (!bool) {
          //删除找下标
          let index = this.auths.findIndex((item) => item === checkedParentId);
          this.auths.splice(index, 1);
        }
      });
      //3.是全选中 - 父权限应该在这个数组中
    },
  },
  // 调用方法
  created() {
    this.getAuthList();
    //在created 获取到传递过来的角色id 才能拿id获取数据
    //两种 动态路由传参 方法
    //   console.log(this.$route.query);  没东西用params
    //   console.log(this.$route.params);
    // 动态路由传参  - restful风格路径传参
    //获取id  可以发请求了
    let id = this.$route.params.id;
    this.id = id;
    //发请求 获取当前角色数据 需要传id
    this.getOneRole(id);
  },
};
</script>

<style>
</style>
